<template>
  <div class="box">
    <div class="rankingList-top">
      <div class="rankingList-top_item">
        <img src="../assets/login-register/cancel.png" @click="Return" class="rankingList-top_img" alt="">
      </div>
      <div class="rankingList-top_item rankingList-top_center">我的信息</div>
      <div class="rankingList-top_item">
        <img src="../assets/icon/menu.png" class="rankingList-top_img2" alt="">
      </div>
    </div>

    <div class="main">
      <span class="friends-top_item friends-top_center">
          <ul class="tab-title">
            <li @click="cur=0" :class="{active:cur==0}">私信</li>
            <li @click="cur=1" :class="{active:cur==1}">评论</li>
            <li @click="cur=2" :class="{active:cur==2}">@我</li>
            <li @click="cur=3" :class="{active:cur==3}">通知</li>
          </ul>
        </span>
        <div class="Concerned-people" v-show="cur==0" v-for="(item, index) in news_nr">
    <div class="portrait-left">
      <img :src="item.fromUser.avatarUrl" alt="" @click="$router.push({ name: 'JokerXue', query:{ userId : item.userId }})">
    </div>
    <div class="name-right">
      <div class="ppp">
        <p class="name">{{item.fromUser.nickname}}</p>
        <p class="personalized">{{msgArr[index]}}</p>
      </div>
    </div>
    <span class="more">
      <span class="sj">12月12日</span>
      <span class="xx">{{item.newMsgCount}}</span>
  </span>
  </div>
        <div class="Concerned-people" v-show="cur==1" >
          <div class="box_item" v-show="Commentarr.length===0">暂时还没有收到评论</div>

      </div>
        <div class="Concerned-people" v-show="cur==2">
          <div class="box_item" v-show="myarr.length===0">暂时还没有收到@</div>

      </div>
        <div class="Concerned-people" v-show="cur==3" >
          <div class="box_item" v-show="messagearr.length===0">暂时还没有收到通知</div>

      </div>
    </div>

  </div>

</template>

<script>
     export default {
       name: "news",
       data() {
         return {
           cur: 0, // 默认选中第一个tab
           id : this.$storage.get('user').account.id,
           news_nr:[],
           msgArr: [],
           active: 0,
           Commentarr:[],
           myarr:[],
           messagearr:[],
         }
       },
       methods: {
         Return() {
           this.$router.back(-1);
         },
       },
       created() {
         /*       console.log(this.$storage.get('user'));*/
         this.$http.get(`/api/msg/private`)
           .then((res) => {
           console.log(res);
           this.news_nr = res.data.msgs;
           this.news_nr.forEach((item) =>{
             // console.log();
             this.msgArr.push(JSON.parse(item.lastMsg).msg);
           });
          /*   console.log(this.msgArr);*/
           });
         this.$http.get(`/api/msg/comments?uid=${this.id}`).then((res) => {
           this.Commentarr = res.data.comments;
         });
         this.$http.get('/api/msg/forwards').then((res) => {
           console.log(res);
           this.myarr = res.data.forwards;
         });
         this.$http.get('/api/msg/notices').then((res) => {
           console.log(res);
           this.messagearr = res.data.notices;
         });
       },
     }
</script>

<style scoped>
  .box_item{
    width: 100vw;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    color: #333333;

  }
  .friends-top_item{
    width: 50px;
    height: inherit;
    display: inline-block;
    float: left;
  }
  .friends-top_center{
    width: 100vw;
    height: 60px;
    font-size: 18px;
    color: #fff;
    border-bottom: 1px solid #eaeaeb;
  }
  .tab-title{
    width: 340px;
    height: 30px;
    border: 2px solid #E0A29D;
    display: inline-block;
    margin-top: 8px;
    margin-left: 4vw;
    border-radius: 45px;
    font-size: 0;
  }
  .tab-title li{
    float: left;
    width: 85px;
    height: 31px;
    text-align: center;
    background-color:#fff;
    border-radius: 45px;
    line-height: 30px;
    font-size: 15px;
    color: #D14A3C;
    margin-top: 0px;
  }
  ul li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* 点击对应的标题添加对应的背景颜色 */
  .tab-title .active{
    background-color: #C2463A;
    color: #fff;
    line-height: 30px;
  }
  .box{
    width: 100vw;
  }
  .rankingList-top{
    width: 100vw;
    height: 50px;
    background: #C64B3D;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fffdef;
    position: fixed;
    z-index: 10;

  }
  .rankingList-top_item{
    width: 33vw;
    height: 50px;
    float: left;
  }
  .rankingList-top_img{
    width: 12px;
    display: block;
    margin-top: 15px;
    margin-left: 15px;
  }
  .rankingList-top_img2{
    width: 18px;
    display: block;
    margin-top: 18px;
    margin-left: 90px;
  }
  .main{
    width: 100vw;
    padding-top: 50px;
    box-sizing: border-box;
  }
  .Concerned-people{
    width: 100vw;
    height: 70px;
    position: relative;
    overflow: hidden;
  }
  .portrait-left{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    float: left;
    margin-top: 8px;
    margin-left: 8px;
    overflow: hidden;
  }
  .portrait-left img{
    width: inherit;
    height: inherit;
  }

  .name-right{
    width: 302px;
    height: 70px;
    float: left;
    margin-left: 10px;
    border-bottom: 1px solid #f4f4f5;
    position: relative;
    top: -1px;
    display: flex;
    align-items:center;
  }
  .ppp{
    width: 240px;
  }

  .name{
    font-size: 16px;
  }
  .personalized{
    font-size: 13px;
    color: #ADADAE;
    line-height: 25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .more{
    width: 25px;
    height: 18px;
    display: block;
    position: absolute;
    top: 25px;
    right: 30px;

  }
  .sj{
    width: 50px;
    height: 15px;
    display: block;
    font-size: 10px;
    color: #B8B9BA;
    margin-top: -7px;
    text-align: center;
    line-height: 15px;

  }
  .xx{
    width: 30px;
    height: 18px;
    display: block;
    font-size: 14px;
    background: #C2463A;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    margin-top: 4px;
    margin-left: 15px;

  }
</style>
